<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>上传图片</h3>
    <input type="file" id = "file">

    <script>
        window.addEventListener("load",()=>{
            //获取事件
            let file = document.getElementById("file");
            //接听作用域的表化
            file.onchange = function(){//onchange内容发生改变事件
                //value打印文件的本地路径
                // console.log(this.value);
                //文件资源
                // console.log(this.files);//打印的是文件列表
                //获取文件路劲
                let path = file.value;
                //或者let path = this.value;

                //截取文件属性后缀
                let suffix = path.substr(path.lastIndexOf('.'));
                // console.log(suffix)

                //统一转换为小写
                let lowerSuffix = suffix.toLowerCase();

                //判断
                if(lowerSuffix === '.jpg' || lowerSuffix === '.png'){
                    alert('上传文件正确')
                }
                else{
                    alert('上传文件不正确')
                }
            }

        });
    </script>
</body>
</html>